<template>
	<div>
		<div class="aid">
			<div class="base">
				<p class="fixed-top">
					申请活动
					<a-icon @click="closeFunction" type="close" />
				</p>
				<div class="main">
					<a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }" @submit="handleSubmit">
						<a-form-item label="学生组织">
							<a-select
								v-decorator="['ClubID', { rules: [{ required: true, message: '请选择学生组织' }] }]"
								showSearch
								optionFilterProp="children"
								style="width: 100%"
								:showArrow="false"
								@search="fetchClub"
								:filterOption="filterOption"
								placeholder="请输入关键字进行搜索"
								allowClear
							>
								<a-select-option v-for="(item, index) in ClubList" :key="item.ID">{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item label="负责人">
							<a-select
								v-decorator="['ChargeUserNo', { rules: [{ required: true, message: '请选择负责人' }] }]"
								showSearch
								optionFilterProp="children"
								style="width: 100%"
								:showArrow="false"
								@search="fetchUser"
								:filterOption="filterOption"
								placeholder="请输入关键字进行搜索"
								allowClear
							>
								<a-select-option v-for="(item, index) in UserList" :key="item.UserNo">{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item label="活动标题"><a-input v-decorator="['Title', { rules: [{ required: true, message: '活动标题不能为空' }] }]" /></a-form-item>
						<a-form-item label="活动类型">
							<a-select
								:allowClear="true"
								v-decorator="['TypeID', { rules: [{ required: true, message: '请选择活动类型' }] }]"
								placeholder="全部"
								optionFilterProp="children"
								showSearch
							>
								<a-select-option v-for="(item, index) in ActivityTypeList" :key="index" :value="item.ID">{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item label="参加活动是否需要审批">
							<a-radio-group v-decorator="['ApplyIsNeedExam', { rules: [{ required: true, message: '请选择参加活动是否需要审批' }] }]">
								<a-radio value="true">需要审批</a-radio>
								<a-radio value="false">不需要审批</a-radio>
							</a-radio-group>
						</a-form-item>
						<a-form-item label="活动时间">
							<a-range-picker show-time v-decorator="['activityDate', { rules: [{ required: true, message: '活动时间不能为空' }] }]" />
						</a-form-item>
						<!-- <a-form-item label="活动图标">
							<a-upload
								v-decorator="['Ico']"
								accept="image/*"
								:action="requestUrl+'/Common/DoUploadFile?type=image'"
								list-type="picture-card"
								:file-list="icofileList"
								@preview="handlePreview"
								@change="e => icohandleChange(e, 'Ico')"
							>
								<div v-if="icofileList.length < 1" :disabled="showstate">
									<a-icon type="plus" />
									<div class="ant-upload-text">Upload</div>
								</div>
							</a-upload>
							<span class="titletip">Tip：请上传350*350格式的图片(宽高比例为1:1)</span>
						</a-form-item> -->
						<!-- <a-form-item label="活动开始时间">
							<a-date-picker
								format="YYYY-MM-DD HH:mm:ss"
								show-time
								:disabled-date="disabledStartDate"
								@change="e => dataChange(e, 'StartTime', 'data')"
								v-decorator="['StartTime', { rules: [{ required: true, message: '活动开始时间不能为空' }] }]"
							/>
						</a-form-item>
						<a-form-item label="活动结束时间">
							<a-date-picker
								format="YYYY-MM-DD HH:mm:ss"
								show-time
								:disabled-date="disabledEndDate"
								@change="e => dataChange(e, 'EndTime', 'data')"
								v-decorator="['EndTime', { rules: [{ required: true, message: '活动结束时间不能为空' }] }]"
							/>
						</a-form-item> -->
						<a-form-item label="活动人数">
							<a-input style="width:100px;" type="number" v-decorator="['PeopleNum', { rules: [{ required: true, message: '活动人数不能为空' },{ validator: allintValidator }] }]" />
							<span style="color:#f00;margin-left:10px;">填写-1代表不限制</span>
						</a-form-item>
						<a-form-item v-for="item in data" :label="item.Name">
							<a-input
								v-if="item.FieldType == 1"
								v-decorator="[
									item.ID,
									{
										rules: [
											{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' },
											{ validator: rules[item.ID] ? rules[item.ID].validator : '' }
										]
									}
								]"
							/>
							<a-input
								v-if="item.FieldType == 2"
								type="textarea" :auto-size="global.textareaHeight"
								v-decorator="[
									item.ID,
									{
										rules: [
											{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' },
											{ validator: rules[item.ID] ? rules[item.ID].validator : '' }
										]
									}
								]"
							/>
							<a-input
								v-if="item.FieldType == 3"
								type="number"
								v-decorator="[
									item.ID,
									{
										rules: [
											{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' },
											{ validator: rules[item.ID] ? rules[item.ID].validator : intValidator }
										]
									}
								]"
							/>
							<a-input
								v-if="item.FieldType == 4"
								type="number"
								:step="0.01"
								v-decorator="[
									item.ID,
									{
										rules: [
											{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' },
											{ validator: rules[item.ID] ? rules[item.ID].validator : '' }
										]
									}
								]"
							/>
							<a-upload
								v-if="item.FieldType == 5 || item.FieldType == 6"
								v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
								:accept="item.FieldType == 5 ? '.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document' : 'image/*'"
								:multiple="true"
								:action="requestUrl+'/Common/DoUploadFile?type='+(item.FieldType == 5?'file':'image')"
								list-type="picture-card"
								:file-list="fileList[item.ID]"
								@preview="handlePreview"
								@change="e => handleChange(e, item.ID)"
							>
								<div v-if="fileList[item.ID].length < 8">
									<a-icon type="plus" />
									<div class="ant-upload-text">Upload</div>
								</div>
							</a-upload>
							<a-date-picker
								v-if="item.FieldType == 7"
								@change="e => dataChange(e, item.ID, 'data')"
								v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
							/>
							<a-time-picker
								v-if="item.FieldType == 8"
								@change="e => dataChange(e, item.ID, 'time')"
								v-decorator="[item.ID, { rules: [{ required: item.IsMust, message: item.ErroeMsg ? item.ErroeMsg : item.Name + '不能为空' }] }]"
							/>
						</a-form-item>
						<a-form-item class="fixed-bottom" :wrapper-col="{ span: 12, offset: 5 }">
							<a-button type="primary" html-type="submit">保存</a-button>
						</a-form-item>
					</a-form>
				</div>
				<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import Func from '@/utils/func';
import { GetFormList, userAddActivity, UserUpdateActivity, UserDoGetActivityTypeList, AddActivity ,GetClubPageListCommon,GetUserList} from '@/api/follow';
const data = [];
export default {
	components: {},
	props: {
		text: Object,
	},
	watch: {
		time: {
			handler(text) {},
			immediate: true
		}
	},
	data() {
		return {
			icofileList: [],
			fileList: {},
			previewVisible: false,
			previewImage: '',
			fileList1: [],
			previewVisible1: false,
			previewImage1: '',
			data,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			showstate: true,
			formValue: {},
			dataValue: {},
			rules: {},
			ActivityTypeList: [],
			ClubList:[],
			UserList:[],
			requestUrl: this.global.requestUrl,
		};
	},
	computed: {},
	created() {
		this.getList();
	},
	mounted() {},
	methods: {
		moment,
		allintValidator(rule,value,callback){
			let pattern = /(^-?[1-9]\d*$)/;
			if (value && !pattern.test(value)) {
				callback('请输入整数');
			} else {
				callback();
			}
			callback();
		},
		intValidator(rule,value,callback){
			let pattern = /(^[1-9]\d*$)/;
			if (value && !pattern.test(value)) {
				callback('请输入正整数');
			} else {
				callback();
			}
			callback();
		},
		disabledStartDate(startValue) {
			const endValue = this.form.getFieldValue('EndTime');
			if (!startValue || !endValue) {
				return false;
			}
			return startValue.valueOf() > endValue.valueOf();
		},
		disabledEndDate(endValue) {
			const startValue = this.form.getFieldValue('StartTime');
			if (!endValue || !startValue) {
				return false;
			}
			return startValue.valueOf() >= endValue.valueOf();
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		async fetchClub(value) {
			let myReg = /^[^a-zA-Z]+$/;
			if (value && value.length>1) {
				let data = {};
				data.key = value;
				let res = await GetClubPageListCommon(data);
				this.ClubList = res.data.data;
			}
		},
		async fetchUser(value) {
			let myReg = /^[^a-zA-Z]+$/;
			if (value && value.length>1) {
				let data = {};
				data.key = value;
				data.top = 20;
				let res = await GetUserList(data);
				this.UserList = res.data.data;
			}
		},
		confirm(e) {
			console.log(e);
			this.handleSubmit(e);
		},
		cancel(e) {
		},
		closeFunction(data) {
			this.form.resetFields()
			this.icofileList = []
			this.fileList= {}
			this.$emit('closeFun', data);
		},
		handleCancel() {
			this.previewVisible = false;
			this.previewImage = '';
		},
		async handlePreview(file) {
			// let nameType = file.name.substr(file.name.lastIndexOf('.') + 1)
			// if(this.global.imgTypeList.findIndex(m=>{return m==nameType})<0){
			// 	this.$message.error('该文件格式不支持预览')
			// 	return false
			// }
			this.previewImage = this.requestUrl + file.response.url;
			window.open(this.previewImage, '_blank')
		},
		icohandleChange({ fileList }, name) {
			this.icofileList = fileList;
		},
		handleChange(info, name) {
			let { fileList } = info;
			const status = info.file.status;
			if (status === 'done') {
				if(info.file.response.code==0){
					this.$message.success(info.file.response.msg)
					this.fileList[name] = [...fileList]; //重点
				}else{
					this.$message.error(info.file.response.msg)
					this.fileList[name] = this.fileList[name].splice(this.fileList[name].length-1,1)
				}
			}
			this.fileList[name] = [...fileList]; //重点
		},
		dataChange(e, name, type) {
			let date = moment(e).format('YYYY-MM-DD HH:mm:ss');
			if (type == 'data') {
				let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
				this.dataValue = Object.assign(this.dataValue, { [name]: time });
			} else {
				let time = moment(e).format('HH:mm:ss');
				this.dataValue = Object.assign(this.dataValue, { [name]: time });
			}
			// if (name === 'EndTime') { // 结束时间
			// 	let s = new Date(this.dataValue.StartTime.replace(/\-/g, "\/"))
			// 	let e = new Date(date.replace(/\-/g, "\/"))
			// 	if (e < s) {
			// 		this.$message.error('结束时间不能小于开始时间');
			// 		this.dataValue.EndTime = ''
			// 	}
			// }
		},
		handleSubmit(e) {
			let that = this;
			e.preventDefault();
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data = values;
					let arr1 = [];
					data = Object.assign(data, this.formValue, this.dataValue);
					for (let m = 0; m < this.icofileList.length; m++) {
						if (this.icofileList[m].url) {
							if (this.icofileList[m].url.indexOf(this.requestUrl) > -1) {
								this.icofileList[m].url = this.icofileList[m].url.substring(this.requestUrl.length);
							}
							arr1.push(this.icofileList[m].name + '|' + this.icofileList[m].url);
						} else {
							arr1.push(this.icofileList[m].response.fileName + '|' + this.icofileList[m].response.url);
						}
					}
					data.Ico = arr1.join(',');
					for (let i in this.fileList) {
						let arr = [];
						for (let m = 0; m < this.fileList[i].length; m++) {
							if (this.fileList[i][m].url) {
								if (this.fileList[i][m].url.indexOf(this.requestUrl) > -1) {
									this.fileList[i][m].url = this.fileList[i][m].url.substring(this.requestUrl.length);
								}
								arr.push(this.fileList[i][m].name + '|' + this.fileList[i][m].url);
							} else {
								arr.push(this.fileList[i][m].response.fileName + '|' + this.fileList[i][m].response.url);
							}
						}
						data[i] = arr.join(',');
					}
					for (let n in data) {
						if (data[n] == undefined) {
							data[n] = '';
						}
					}
					if(data.activityDate){
						data.StartTime = moment(data.activityDate[0]).format('YYYY-MM-DD HH:mm:ss')
						data.EndTime = moment(data.activityDate[1]).format('YYYY-MM-DD HH:mm:ss')
					}
					let res = await AddActivity(data);
					if (res.data.code == 0) {
						this.$emit('closeFun',1);
						that.$message.success(res.data.msg);
						this.form.resetFields()
						this.icofileList = []
						this.fileList= {}
					} else {
						that.$message.error(res.data.msg);
					}
				}
			});
		},
		async getOtherList() {
			let res = await GetApplyFormFieldTypeList();
			this.FieldTypeList = res.data.data;
		},
		async getList() {
			this.loading = true;
			let data = {};
			let res2 = await UserDoGetActivityTypeList(data);
			this.ActivityTypeList = res2.data.data;
			if (this.values) {
				data = this.values;
			}
			let res = await GetFormList(data);
			this.loading = false;
			this.data = res.data.data;
			for (var i = 0; i < this.data.length; i++) {
				if (this.data[i].FieldType == 5 || this.data[i].FieldType == 6) {
					this.fileList = Object.assign(this.fileList, { [this.data[i].ID]: [] });
				}
			}
		}
	}
};
</script>

<style lang="less" scoped>
.aid {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	top: 0px;
	left: 0px;
	z-index: 999;
}

.base {
	position: absolute;
	width: 600px;
	height: 540px;
	background: #fff;
	left: 50%;
	margin-left: -300px;
	top: 50%;
	margin-top: -270px;
	overflow-y: auto;
	.main {
		height: 90%;
		overflow-y: scroll;
	}
	/deep/.ant-form-item {
		margin: 20px 50px;
		/deep/.ant-form-item-label {
			width: 180px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: right;
		}
		/deep/.ant-form-item-control-wrapper {
			flex: 1;
			/deep/.ant-calendar-picker,
			/deep/.ant-time-picker {
				width: 100%;
			}
		}
	}
}
.fixed-top {
	width: inherit;
	position: absolute;
	line-height: 30px;
	top: 0px;
	background-color: white;
	z-index: 999;
	padding: 10px 0 0 10px;
}
.fixed-bottom {
	width: 164px;
	left: 50%;
	bottom: 0px;
	margin: 0px 0px 0px -82px !important;
	position: absolute;
	background-color: white;
	z-index: 999;
}
/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
.titletip {
	padding-left: 10px;
	font-size: 12px;
	color: red;
}
/deep/.ant-form-item-label {
	width: 86px !important;
}
</style>
